<template>
	<view class="container">
		<view class="index-bg">
			<view class="left">
				<view class="title">贡献值余额</view>
				<view class="num">{{contribution ? contribution : 0}}</view>
				<view class="rate">(1贡献值≈{{contributionRate}}元）</view>
			</view>
			<view class="btn" @tap='drawCash'>立即提现</view>
		</view>
		<view class="list-wrap">
			<view class="list-title">
				提现明细
			</view>
			<view class="list-con" v-if='list.length > 0'>
				<view class="list-item" v-for="(item,index) in list" :key="index">
					<view class="top">
						<text class="t">提现</text>
						<text class="t">-{{item.price}}</text>
					</view>
					<view class="bottom">
						<text class="t1">{{item.create_time}} {{item.state_text}}</text>
						<text class="t1">含手续费{{item.service_charge}}元，实际到账{{item.payment_amount}}元</text>
					</view>
				</view>
				<loading :loadEnd='loadEnd' class="load-t"></loading>
			</view>
			<no-data v-else class="noData"></no-data>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				contribution: '',
				contributionRate:'',
				page: 1,
				totalPage: 1,
				list: [],
				loadEnd: false,
			}
		},
		onLoad() {
			this.getList()
		},
		onPullDownRefresh() {
			this.page = 1;
			this.totalPage = 1;
			this.list = [];
			this.loadEnd = false;
			this.getList();
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			let that = this;
			if (that.page < that.totalPage) {
				this.loadEnd = false;
				that.page++;
				that.getList()
			} else {
				return;
			}
		},
		methods: {
			getList(){
				const that = this;
				app.globalRequest({
					api:app.getApi().cash.cashContributionList,
					data:{
						page: that.page,
						limits: 15
					}
				}).then(res=>{
					if(res.code == 0){
						that.contribution = res.contribution;
						that.contributionRate = res.contribution_rate;
						that.list = that.list.concat(res.data.data);
						that.totalPage = res.data.last_page;
						if (that.totalPage == that.page) {
							that.loadEnd = true;
						}
					}
				})
			},
			drawCash(){
				uni.navigateTo({
					url:'/pages/drawcash/drawcash'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		padding:40rpx 0 50rpx;
	}
	.index-bg{
		width: 702rpx;
		height: 220rpx;
		padding:0 24rpx;
		box-sizing: border-box;
		background: url(@/static/index-bg.png) no-repeat;
		background-size: 100% 100%;
		margin:auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.left{
			.title{
				font-size: 32rpx;
				line-height: 40rpx;
			}
			.num{
				font-family: 'DIN-BOLD';
				font-size: 72rpx;
			}
			.rate{
				font-size: 24rpx;
			}
		}
		.btn{
			width: 200rpx;
			height: 92rpx;
			background: url(@/static/index-btn-bg.png) no-repeat;
			background-size: 100% 100%;
			line-height: 80rpx;
			text-align: center;
			font-size: 24rpx;
		}
	}
	.list-wrap{
		margin:40rpx 24rpx;
		.list-title{
			font-size: 32rpx;
			position: relative;
			padding-left:18rpx;
			&:before{
				content: '';
				width: 6rpx;
				height: 26rpx;
				background: #131313;
				border-radius: 4rpx;
				position: absolute;
				left:0;
				top:9rpx;
			}
		}
		.list-item{
			padding:30rpx 0 28rpx;
			border-bottom: 1px solid #F5F7F9;
			.top{
				display: flex;
				justify-content: space-between;
			}
			.bottom{
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				color:#707070;
				margin-top:10rpx;
			}
		}
	}
	.load-t{
		margin-top:30rpx;
	}
	
</style>
